<template>
  <div class="h-full bg-grey">
    <!-- 头部搜索 -->
    <div class="h-55 p-10 flex a-center sticky top-0 z-index-10 bg-white">
      <van-icon @click="$router.go(-1)" class="text-red" name="arrow-left" />
      <router-link
        tag="div"
        :to="{path: '/search', query: {type: 'merchant'}}"
        class="flex-1 m-l-10"
      >
        <VSearch :content="searchValue || '搜索'"></VSearch>
      </router-link>
    </div>
    <div>
      <!-- 筛选 -->
      <!-- <van-dropdown-menu class="fs-14 text-content sticky top-55 z-index-10" active-color="#fd4f51">
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
      </van-dropdown-menu>-->
      <div class="p-10 bg-grey">
        <van-skeleton avatar :row="4" avatar-size="80" avatar-shape="square" :loading="!ready">
          <van-list
            v-model="listControl.loading"
            :finished="listControl.pages === 0 || listPage.current === listControl.pages"
            finished-text="没有更多了"
            @load="getMoreData()"
            :immediate-check="false"
          >
            <merchant-list :list="list"></merchant-list>
          </van-list>
        </van-skeleton>
      </div>
      <div v-if="!list.length && ready" class="p-h-10 bg-grey">
        <empty-data class="text-center m-t-20" content="没有搜索到附近的商家"></empty-data>
      </div>
    </div>
  </div>
</template>

<script>
import logo from '@/assets/images/merchant.jpg'
import VSearch from '@/components/VSearch'
import MerchantList from '@/views/Index/components/MerchantList'
export default {
  data () {
    return {
      ready: false,
      searchValue: '',
      list: [],
      listPage: {
        size: 10,
        current: 1
      },
      listControl: {
        pages: null,
        loading: false
      },
      logo,
      value1: 0,
      value2: 'a',
      option1: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 }
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' }
      ]
    }
  },
  components: {
    VSearch,
    MerchantList
  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      this.getVal()
      await this.getMerchant()
      this.ready = true
    },
    getMoreData () {
      // 分页查询附近商家
      this.listPage.current++
      this.getMerchant()
    },
    async getMerchant () {
      this.listControl.loading = true
      let { zxOrgList, pages } = await this.$api.post('/org/queryByXY', {
        size: 10,
        current: this.listPage.current,
        area: '郑州',
        lng: 113.642339,
        lat: 34.753677,
        name: this.searchValue
      })
      zxOrgList.forEach(d => {
        d.agencyService = d.agencyService.split(',')
        d.distance = d.distance.toFixed(2)
      })
      this.listControl.pages = pages
      this.listControl.loading = false
      this.list = [...this.list, ...zxOrgList]
    },
    getVal () {
      let { val } = this.$route.query
      this.searchValue = val
    }
  }
}
</script>

<style lang="scss" scoped>
.top-55 {
  top: 55px;
}
.info {
  align-self: flex-start;
}
.btn {
  &:active {
    background: #dea448;
  }
}
</style>
